import React, {Component, Fragment} from 'react';
import logo from '../logo.svg';
import {Layout, Form, Icon, Input, Button, Checkbox, Row, Col} from 'antd';
import Header from '../components/header'
import Footer from '../components/footer'
import { Link } from 'react-router-dom';

const {Content} = Layout;

class loginPage extends Component {
  constructor(props){
    super(props)
    this.state={
      list:[],
    }
  }

  handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
 
  render(){

    const { getFieldDecorator } = this.props.form;

    return (
      <Fragment>
        <Layout className="layout" style={{height:"100%"}}>
          <Header logo={logo} username={this.props.name} />
          <Content style={{ padding: '0 50px' }}>
            <Row>&nbsp;</Row>
            <Row>
            <div style={{ background: '#fff',  padding:24, minHeight: 480 }}>
              <h1>&nbsp;</h1>
              <Row>
                <Col span={8} offset={16}>
                  <Form onSubmit={this.handleSubmit} className="login-form">
                    <Form.Item>
                      {getFieldDecorator('username', {
                        rules: [{ required: true, message: 'Please input your username!' }],
                      })(
                        <Input
                          prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                          placeholder="Username"
                        />,
                      )}
                    </Form.Item>
                    <Form.Item>
                      {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                      })(
                        <Input
                          prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                          type="password"
                          placeholder="Password"
                        />,
                      )}
                    </Form.Item>
                    <Form.Item>
                      {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: true,
                      })(<Checkbox>Remember me</Checkbox>)}
                      <Link className="login-form-forgot" >
                        Forgot password
                      </Link>
                      <Button type="primary" htmlType="submit" className="login-form-button">
                        Log in
                      </Button>
                      Or <Link>register now!</Link>
                    </Form.Item>
                  </Form>
                </Col>
              </Row>
            </div>
            </Row>
          </Content>
          <Footer logo={logo} />  
        </Layout>
      </Fragment>
    );
  }
  
}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(loginPage);

export default WrappedNormalLoginForm;
